<template>
<div class="div_main_frame" style="text-align:center;margin:0 auto;padding-top:0px" align="center">
<div class="fastweb_div_middle" style="width:100%;text-align:center;padding-left:6px;padding-right:6px;padding-top:0px">
    <div class="div_main_frame" style="width:98%;float:left;margin:auto;margin-top:0px;">
        <!--el-form  :inline="true" ref="formRef" :model="form" label-width="70px">
          <el-form-item label="">
            <el-col :span="24">
            <el-input v-model="form.entity_name"></el-input>
            </el-col>
            <el-col :span="16">
            <p></p>
            </el-col>
          </el-form-item>

          <el-form-item>
            <el-button type="primary" @click="queryEntity">搜索</el-button>
          </el-form-item>
        </el-form>
        <p><router-link :to="{name:'entity_list'}" target="_blank">现有实体集分类</router-link></p-->

        <div class="div_main_frame" style="width:100%;margin:0px;padding:0px;">
          <div style="padding-left:14px;"><p>{{default_msg}},<router-link :to="{name:'list'}" target="_blank" style="font-size:18px;">现有实体集分类查看</router-link></p></div>
          <ViewEntitySearchData :json_data="json_data" />

            <div class="demo-pagination-block">
                  <el-pagination
                    v-model:currentPage="currentPage1"
                    :page-size="100"
                    :small="true"
                    :disabled="disabled"
                    :background="true"
                    layout="page-count, prev, pager, next"
                    :page-count="page_max"
                    :pager="pager"
                    @size-change="handleSizeChange"
                    @current-change="handleCurrentChange"
                  />
            </div>
        </div>
    </div>
       
    <div style="clear:both"></div>
</div>
</div>
<ViewFooter/>
</template>

<script>
import { reactive,ref } from 'vue'
import ViewFooter from '@/components/ViewFooter.vue'
import ViewEntitySearchData from '@/components/ViewEntitySearchData.vue'
import { getCurrentInstance } from 'vue'
import "@/assets/global.css"
import "@/assets/fastweb.css"

  export default {
    name: 'PageEntitySearch',
    components: {
        ViewFooter,
        ViewEntitySearchData,
    },
    data() {
      return {
        json_data:[],
        page_max:0,
        default_msg:'',
        pager:0,
      };
    },
    setup(){
      const form = reactive({
            entity_name: '',
            });
      const host = getCurrentInstance()?.appContext.config.globalProperties.host
      return {form, host}

      
    },
    beforeRouteEnter(to, from, next){
      console.log("beforeRouteEnter");
      next(vm => {
        console.log("beforeRouteEnter000");
        vm.title = to.meta.title;
        let url = vm.setRequestUrl(to.fullPath);
        vm.getDatas(url, vm.pageNum, vm.pageSize);
      });
    },
    beforeRouteUpdate(to){
      console.log("beforeRouteUpdate123");
      let url = this.setRequestUrl(to.fullPath);
    },
    methods: {
      getDatas() {
        var word = "深圳";
        if (this.$route.query.word) {
          word = this.$route.query.word;
          this.default_msg = "“".concat(word).concat("”搜索结果如下，名称和内容中包含相关信息均会被搜索到");
        } else {
          this.default_msg = "默认搜索“深圳”，名称和内容中包含相关信息均会被搜索到";
        }
        this.form.entity_name = word;

        var page = 1;
        if (this.$route.query.page) {
          page = this.$route.query.page;
        }
        this.pager = page;
        //var api_url = this.host.concat("/api/display_entity_search?word=").concat(word).concat("&page=").concat(page);
        var api_url = this.host.concat("/api/display_entity_search?word=").concat(word).concat("&page=").concat(page);
        this.axios.get(api_url)
        .then(response => {
          if((response.status == 200) && (response.data.result == 0)){
            this.json_data = JSON.parse(response.data.data);
            this.page_max = Math.ceil(this.json_data["all"] / 10);
            window.scrollTo(0, 0);
          }
        })
        .catch(error => alert("系统错误，请稍后重试"));
      },
      /*
      queryEntity(){
        var router_path = "/entity_search?word=" + this.form.entity_name
        this.$router.push(router_path)
        //this.getDatas(this.form.entity_name);
      },*/
      //动态设置服务端数据接口的请求URL
      //设置后回导致重复调用上次的请求
      
      setRequestUrl(path){
        let url = path;
        console.log("path:", path);
        return url;
      },
      handleCurrentChange(val) {
        console.log(`current page: ${val}`)
        var router_path = "/search?word=" + this.form.entity_name + "&page=" + val
        this.$router.push(router_path)
      }
    },
    mounted() {
      //this.queryData("");
      // 如果路由发生变化，再次执行该方法
      //"$route": "getDatas"
        this.pager = 10;
        if (this.$route.query.page) {
          this.pager = this.$route.query.page;
        }
        if (this.$route.query.word) {
          this.form.entity_name = this.$route.query.word;
        } 
    },
    watch: {
      // 如果路由发生变化，再次执行该方法
      "$route": "getDatas"
    }
  };
var hm = document.createElement("script");
hm.src = "https://hm.baidu.com/hm.js?c2ba86525ff37a3b2dd6cdadb129fdb5";
var s = document.getElementsByTagName("script")[0]; 
s.parentNode.insertBefore(hm, s);
</script>

<style scoped>
.demo-pagination-block + .demo-pagination-block {
  margin-top: 10px;
}
.demo-pagination-block .demonstration {
  margin-bottom: 16px;
}
</style>